import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Carousel, Card, Row, Col, Skeleton } from 'antd';
import { useLoading } from '../../components/ui/LoadingManager';
import { 
  Phone, 
  Rocket, 
  Shield,
  Users,
  Trophy,
  Headphones,
  Store,
  Volume2,
  Calendar,
  Printer,
  Building,
  Hammer,
  Lightbulb,
  Wrench,
  MessageCircle,
  FileText,
  Edit,
  ArrowRight,
  Target,
  Zap,
  Globe,
  Star,
  Heart,
  Camera,
  Smartphone,
  Award
} from 'lucide-react';
import { ContactModal, BackToTop } from '../../components/ui';
import { APP_CONFIG } from '../../constants';

const HomePage: React.FC = () => {
  const navigate = useNavigate();
  const { withLoading } = useLoading();
  const [contactModalOpen, setContactModalOpen] = useState(false);
  const [pageLoading, setPageLoading] = useState(true);

  // 页面初始化
  useEffect(() => {
    const initializePage = async () => {
      try {
        // 模拟数据加载
        await new Promise(resolve => setTimeout(resolve, 800));
      } catch (error) {
        console.error('页面初始化失败:', error);
      } finally {
        setPageLoading(false);
      }
    };
    
    initializePage();
  }, []);

  // 静态轮播图数据
  const banners = [
    {
      id: 1,
      title: "专业广告设计，助力品牌腾飞",
      subtitle: "12年行业经验，为您提供一站式广告解决方案",
      image: "/images/banners/banner1.jpg"
    },
    {
      id: 2,
      title: "创意无限，品质至上",
      subtitle: "从设计到制作，全程专业服务",
      image: "/images/banners/banner2.jpg"
    },
    {
      id: 3,
      title: "本地服务，贴心保障",
      subtitle: "深耕本地市场，了解客户需求",
      image: "/images/banners/banner3.jpg"
    }
  ];



  // 特色服务数据
  const features = [
    {
      icon: <Rocket className="w-8 h-8" />,
      title: "快速响应",
      description: "24小时内响应客户需求，提供专业的设计方案和报价",
      image: "/images/services/quick-response.jpg"
    },
    {
      icon: <Shield className="w-8 h-8" />,
      title: "品质保障",
      description: "严格的质量控制体系，确保每一个产品都符合行业标准",
      image: "/images/services/quality-assurance.jpg"
    },
    {
      icon: <Headphones className="w-8 h-8" />,
      title: "贴心服务",
      description: "从设计到安装，全程跟踪服务，让您省心省力",
      image: "/images/services/customer-service.jpg"
    },
    {
      icon: <Award className="w-8 h-8" />,
      title: "专业团队",
      description: "拥有专业设计团队，为您提供创意无限的设计方案",
      image: "/images/services/professional-team.jpg"
    },
    {
      icon: <Star className="w-8 h-8" />,
      title: "价格透明",
      description: "明码标价无隐形消费，提供详细的报价清单",
      image: "/images/services/transparent-pricing.jpg"
    },
    {
      icon: <Heart className="w-8 h-8" />,
      title: "售后保障",
      description: "提供完善的售后服务体系，产品质保期内免费维护",
      image: "/images/services/after-sales.jpg"
    }
  ];

  const services = [
    {
      icon: <Lightbulb className="w-6 h-6" />,
      title: "品牌视觉设计",
      items: [
        "LOGO设计与VI系统",
        "品牌形象识别规范",
        "吉祥物与IP形象设计",
        "企业文化视觉表达"
      ],
      image: "/images/services/brand-design.jpg"
    },
    {
      icon: <Printer className="w-6 h-6" />,
      title: "宣传印刷制品",
      items: [
        "名片、画册、折页设计",
        "海报、单页、不干胶",
        "企业年鉴、文化手册",
        "高端印刷工艺制作"
      ],
      image: "/images/services/printing.jpg"
    },
    {
      icon: <Building className="w-6 h-6" />,
      title: "包装制品设计",
      items: [
        "产品包装创意设计",
        "包装盒结构设计",
        "环保材料包装方案",
        "电商详情页包装展示"
      ],
      image: "/images/services/packaging.jpg"
    },
    {
      icon: <Store className="w-6 h-6" />,
      title: "门头招牌制作",
      items: [
        "LED发光字招牌",
        "亚克力立体字标识",
        "不锈钢精工字制作",
        "店面门头整体设计"
      ],
      image: "/images/services/storefront.jpg"
    },
    {
      icon: <Volume2 className="w-6 h-6" />,
      title: "立体字标识",
      items: [
        "金属立体字制作",
        "发光立体字工艺",
        "树脂立体字应用",
        "个性化造型设计"
      ],
      image: "/images/services/3d-letters.jpg"
    },
    {
      icon: <Zap className="w-6 h-6" />,
      title: "光电标识系统",
      items: [
        "LED显示屏制作",
        "霓虹灯创意设计",
        "智能灯箱广告",
        "互动光电装置"
      ],
      image: "/images/services/led-signage.jpg"
    },
    {
      icon: <Building className="w-6 h-6" />,
      title: "建筑装饰工程",
      items: [
        "外立面装饰设计",
        "室内空间装饰",
        "装饰材料定制",
        "工程施工管理"
      ],
      image: "/images/services/building-decoration.jpg"
    },
    {
      icon: <Globe className="w-6 h-6" />,
      title: "背胶应用制作",
      items: [
        "车身贴、玻璃贴制作",
        "墙贴、地贴应用",
        "户外耐候背胶",
        "个性化贴膜设计"
      ],
      image: "/images/services/adhesive-graphics.jpg"
    }
  ];

  const stats = [
    {
      icon: <Trophy className="w-8 h-8" />,
      number: "500+",
      label: "成功案例"
    },
    {
      icon: <Users className="w-8 h-8" />,
      number: "1000+",
      label: "服务客户"
    },
    {
      icon: <Headphones className="w-8 h-8" />,
      number: "99%",
      label: "客户满意度"
    },
    {
      icon: <Rocket className="w-8 h-8" />,
      number: "10+",
      label: "服务年限"
    }
  ];

  // 场景解决方案数据
  const solutions = [
    {
      id: 1,
      title: "零售连锁店铺",
      subtitle: "统一品牌形象，提升门店档次",
      description: "为连锁品牌提供统一的视觉识别系统，包括门头设计、店内导视、促销物料等，打造专业统一的品牌形象。",
      image: "/images/solutions/retail-chain.jpg",
      features: ["门头招牌设计", "店内导视系统", "促销物料制作", "品牌形象统一"]
    },
    {
      id: 2,
      title: "餐饮美食行业",
      subtitle: "诱人视觉，激发食欲",
      description: "专业的餐饮广告设计，从菜单设计到店面装饰，营造温馨舒适的用餐环境，提升顾客体验。",
      image: "/images/solutions/restaurant.jpg",
      features: ["菜单设计制作", "美食灯箱广告", "店面装饰设计", "外卖包装设计"]
    },
    {
      id: 3,
      title: "医疗健康机构",
      subtitle: "专业可信，温馨关怀",
      description: "为医疗机构打造专业可信的品牌形象，通过清晰的导视系统和温馨的环境设计，缓解患者紧张情绪。",
      image: "/images/solutions/medical.jpg",
      features: ["医疗导视系统", "科室标识牌", "健康宣传栏", "温馨环境设计"]
    },
    {
      id: 4,
      title: "教育培训机构",
      subtitle: "启发智慧，成就未来",
      description: "为教育机构设计富有启发性的学习环境，通过创意的视觉设计激发学习兴趣，营造浓厚的学习氛围。",
      image: "/images/solutions/education.jpg",
      features: ["校园文化墙", "教室标识系统", "励志标语设计", "活动宣传物料"]
    },
    {
      id: 5,
      title: "房地产开发",
      subtitle: "品质生活，理想家园",
      description: "为房地产项目提供从售楼处到样板间的全套视觉解决方案，展现项目品质，吸引目标客户。",
      image: "/images/solutions/real-estate.jpg",
      features: ["售楼处包装", "户外广告投放", "样板间设计", "项目形象推广"]
    },
    {
      id: 6,
      title: "汽车服务行业",
      subtitle: "专业服务，安全保障",
      description: "为汽车服务商打造专业可靠的品牌形象，通过清晰的服务流程展示和专业的环境设计，提升客户信任度。",
      image: "/images/solutions/automotive.jpg",
      features: ["服务流程展示", "安全标识系统", "品牌形象设计", "客户休息区装饰"]
    }
  ];

  // 页面加载状态
  if (pageLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-purple-50">
        {/* Hero区域骨架屏 */}
        <div className="relative bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800 text-white py-16 sm:py-24">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center">
              <Skeleton.Input active size="large" className="mb-4" style={{ width: 400, height: 60 }} />
              <Skeleton.Input active size="default" className="mb-8" style={{ width: 600, height: 24 }} />
              <div className="flex justify-center gap-4">
                <Skeleton.Button active size="large" style={{ width: 120 }} />
                <Skeleton.Button active size="large" style={{ width: 120 }} />
              </div>
            </div>
          </div>
        </div>
        
        {/* 内容区域骨架屏 */}
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[...Array(6)].map((_, index) => (
              <Card key={index} className="h-64">
                <Skeleton active paragraph={{ rows: 4 }} />
              </Card>
            ))}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen">
      {/* Hero轮播图区域 - 响应式优化 */}
      <section className="relative bg-gradient-to-br from-blue-50 to-white">
        <Carousel 
          autoplay 
          effect="fade" 
          dots={{ className: 'custom-dots !bottom-8' }}
          className="hero-carousel"
          autoplaySpeed={5000}
        >
          {banners.map((banner) => (
            <div key={banner.id} className="relative">
                <div 
                  className="h-[400px] sm:h-[500px] md:h-[600px] lg:h-[700px] bg-cover bg-center bg-no-repeat relative"
                  style={{ 
                    backgroundImage: `url(${banner.image})`
                  }}
                >
                  {/* 背景遮罩层 */}
                  <div className="absolute inset-0 bg-gradient-to-r from-black/50 via-black/30 to-transparent"></div>
                  
                  <div className="container h-full flex items-center relative z-10 px-4 sm:px-6 lg:px-8">
                    <div className="max-w-3xl">
                      <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold mb-4 sm:mb-6 text-white leading-tight drop-shadow-lg">
                        {banner.title}
                      </h1>
                      {banner.subtitle && (
                        <p className="text-base sm:text-lg md:text-xl mb-6 sm:mb-8 text-white/90 leading-relaxed drop-shadow-md">
                          {banner.subtitle}
                        </p>
                      )}
                      <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
                        <Button 
                          type="primary" 
                          size="large"
                          icon={<Phone className="w-4 h-4 sm:w-5 sm:h-5" />}
                          onClick={() => setContactModalOpen(true)}
                          className="bg-blue-600 hover:bg-blue-700 border-none px-6 sm:px-8 py-3 h-auto text-base sm:text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 w-full sm:w-auto"
                        >
                          免费咨询报价
                        </Button>
                        <Button 
                          size="large"
                          onClick={() => navigate('/cases')}
                          className="border-2 border-white text-black hover:bg-white hover:text-blue-600 px-6 sm:px-8 py-3 h-auto text-base sm:text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm bg-white/90 w-full sm:w-auto"
                        >
                          查看案例
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))
          }
        </Carousel>
      </section>

      {/* 特色服务区域 - 响应式优化 */}
      <section className="py-12 sm:py-16 bg-white">
        <div className="container px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-8 sm:mb-12">
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-800 mb-3 sm:mb-4">
              为什么选择财兴广告
            </h2>
            <p className="text-base sm:text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed px-4">
              {APP_CONFIG.slogan}
            </p>
          </div>
          
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
            {features.map((feature, index) => (
              <div key={index} className="group">
                <div className="bg-white rounded-xl p-4 sm:p-6 shadow-md hover:shadow-lg transition-all duration-300 border border-gray-100 hover:border-blue-200">
                  <div className="mb-4 sm:mb-6">
                    <div className="w-12 h-12 sm:w-16 sm:h-16 bg-blue-600 rounded-lg flex items-center justify-center mb-3 sm:mb-4 group-hover:bg-blue-700 transition-colors duration-300">
                      <div className="text-xl sm:text-2xl text-white">
                        {feature.icon}
                      </div>
                    </div>
                  </div>
                  
                  <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-gray-800 group-hover:text-blue-600 transition-colors duration-300">
                    {feature.title}
                  </h3>
                  
                  <p className="text-gray-600 leading-relaxed text-sm sm:text-base">
                    {feature.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 数据统计区域 - 响应式优化 */}
      <section className="py-12 sm:py-16 bg-blue-600 text-white">
        <div className="container px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-8 sm:mb-12">
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-3 sm:mb-4">
              值得信赖的专业团队
            </h2>
          </div>
          
          <Row gutter={[16, 16]} className="text-center">
            {stats.map((stat, index) => (
              <Col xs={12} md={6} key={index}>
                <div className="group">
                  <div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 sm:p-6 hover:bg-white/20 transition-all duration-300 border border-white/20">
                    <div className="text-white mb-3 sm:mb-4 text-2xl sm:text-3xl md:text-4xl flex justify-center">
                      {stat.icon}
                    </div>
                    <div className="font-bold mb-1 sm:mb-2 text-white text-2xl sm:text-3xl md:text-4xl">
                      {stat.number}
                    </div>
                    <div className="text-blue-100 font-medium text-sm sm:text-base">
                      {stat.label}
                    </div>
                  </div>
                </div>
              </Col>
            ))}
          </Row>
        </div>
      </section>

      {/* 场景解决方案轮播区域 */}
      <section className="py-12 sm:py-16 bg-white">
        <div className="container px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-8 sm:mb-12">
            <div className="inline-flex items-center justify-center bg-blue-600 rounded-lg mb-4 sm:mb-6 w-12 h-12 sm:w-16 sm:h-16">
              <Target className="text-white w-6 h-6 sm:w-8 sm:h-8" />
            </div>
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-800 mb-3 sm:mb-4">
              行业解决方案
            </h2>
            <div className="text-base sm:text-lg text-blue-600 font-semibold mb-3 sm:mb-4">
              6大行业 • 专业定制
            </div>
            <p className="text-sm sm:text-base text-gray-600 max-w-3xl mx-auto leading-relaxed px-4">
              深耕各行各业，为不同行业客户提供专业的广告设计解决方案
            </p>
          </div>
          
          <Carousel 
            autoplay 
            dots={true}
            slidesToShow={3}
            slidesToScroll={1}
            responsive={[
              {
                breakpoint: 1024,
                settings: {
                  slidesToShow: 2,
                  slidesToScroll: 1
                }
              },
              {
                breakpoint: 768,
                settings: {
                  slidesToShow: 1,
                  slidesToScroll: 1
                }
              }
            ]}
            autoplaySpeed={4000}
            className="solutions-carousel"
          >
            {solutions.map((solution) => (
              <div key={solution.id} className="px-2 sm:px-3">
                <div className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 hover:border-blue-200">
                  <div className="relative h-40 sm:h-48 overflow-hidden">
                    <img 
                      src={solution.image}
                      alt={solution.title}
                      className="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                    <div className="absolute bottom-3 sm:bottom-4 left-3 sm:left-4 text-white">
                      <h3 className="text-base sm:text-xl font-bold mb-1">{solution.title}</h3>
                      <p className="text-xs sm:text-sm opacity-90">{solution.subtitle}</p>
                    </div>
                  </div>
                  
                  <div className="p-4 sm:p-6">
                    <p className="text-gray-600 text-xs sm:text-sm leading-relaxed mb-3 sm:mb-4">
                      {solution.description}
                    </p>
                    
                    <div className="space-y-1.5 sm:space-y-2 mb-3 sm:mb-4">
                      {solution.features.map((feature, index) => (
                        <div key={index} className="flex items-center gap-2">
                          <Zap className="w-3 h-3 sm:w-4 sm:h-4 text-blue-600 flex-shrink-0" />
                          <span className="text-xs sm:text-sm text-gray-700">{feature}</span>
                        </div>
                      ))}
                    </div>
                    
                    <Button 
                      type="primary" 
                      className="w-full bg-blue-600 hover:bg-blue-700 border-none h-8 sm:h-10 text-sm sm:text-base"
                      icon={<ArrowRight className="w-3 h-3 sm:w-4 sm:h-4" />}
                      onClick={() => setContactModalOpen(true)}
                    >
                      了解更多
                    </Button>
                  </div>
                </div>
              </div>
            ))}
          </Carousel>
        </div>
      </section>

      {/* 核心业务范围区域 - 响应式优化 */}
      <section className="py-12 sm:py-16 bg-gray-50">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-8 sm:mb-12">
            <div className="inline-flex items-center justify-center bg-blue-600 rounded-lg mb-4 sm:mb-6 w-12 h-12 sm:w-16 sm:h-16">
              <Wrench className="text-white w-6 h-6 sm:w-8 sm:h-8" />
            </div>
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-800 mb-3 sm:mb-4">
              核心业务范围
            </h2>
            <div className="text-base sm:text-lg text-blue-600 font-semibold mb-3 sm:mb-4">
              8大专业领域 • 一站式服务
            </div>
            <p className="text-sm sm:text-base text-gray-600 max-w-3xl mx-auto leading-relaxed px-4">
              专业广告设计制作服务商，提供从设计到安装的完整解决方案，免费上门量尺服务
            </p>
          </div>
          
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
            {services.map((service, index) => (
              <div key={index} className="group">
                <div className="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 border border-gray-100 hover:border-blue-300 h-[400px] sm:h-[450px] flex flex-col hover:scale-105">
                  {/* 服务图片 */}
                  <div className="relative h-40 sm:h-48 overflow-hidden">
                    <img 
                      src={service.image}
                      alt={service.title}
                      className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
                    <div className="absolute top-3 sm:top-4 left-3 sm:left-4">
                      <div className="w-10 h-10 sm:w-12 sm:h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center border border-white/30">
                        <div className="text-white text-base sm:text-lg">
                          {service.icon}
                        </div>
                      </div>
                    </div>
                    <div className="absolute bottom-3 sm:bottom-4 left-3 sm:left-4 right-3 sm:right-4">
                      <h3 className="text-base sm:text-lg font-bold text-white mb-1">
                        {service.title}
                      </h3>
                    </div>
                  </div>
                  
                  {/* 服务内容 */}
                  <div className="p-4 sm:p-6 flex-1 flex flex-col">
                    <div className="space-y-2 sm:space-y-3 flex-1">
                      {service.items.map((item, itemIndex) => (
                        <div key={itemIndex} className="flex items-start gap-2 sm:gap-3">
                          <div className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-blue-500 rounded-full mt-1.5 sm:mt-2 flex-shrink-0"></div>
                          <span className="text-xs sm:text-sm text-gray-700 leading-relaxed font-medium">
                            {item}
                          </span>
                        </div>
                      ))}
                    </div>
                    
                    {/* 底部按钮 */}
                    <div className="mt-4 sm:mt-6 pt-3 sm:pt-4 border-t border-gray-100">
                      <Button 
                        type="primary" 
                        className="w-full bg-blue-600 hover:bg-blue-700 border-none rounded-lg h-8 sm:h-10 font-medium text-sm sm:text-base"
                        icon={<ArrowRight className="w-3 h-3 sm:w-4 sm:h-4" />}
                        onClick={() => setContactModalOpen(true)}
                      >
                        了解详情
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 合作流程区域 */}
      <section className="py-12 sm:py-16 lg:py-20 bg-gradient-to-br from-blue-50 via-white to-blue-50">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-8 sm:mb-12 lg:mb-16">
            <div className="inline-flex items-center justify-center bg-blue-600 rounded-2xl mb-4 sm:mb-6 w-16 h-16 sm:w-20 sm:h-20">
              <Target className="text-white w-8 h-8 sm:w-10 sm:h-10" />
            </div>
            <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 sm:mb-6">
              合作流程
            </h2>
            <div className="text-base sm:text-lg lg:text-xl text-blue-600 font-semibold mb-3 sm:mb-4">
              5步到位 • 专业保障
            </div>
            <p className="text-sm sm:text-base lg:text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed px-4">
              标准化服务流程，从需求沟通到项目交付，每一步都有专业保障
            </p>
          </div>
          
          <div className="relative">
            {/* 简化的流程连接线 */}
            <div className="hidden lg:block absolute top-24 left-0 right-0">
              <div className="flex items-center justify-center mx-auto" style={{width: 'calc(100% - 160px)', marginLeft: '80px', marginRight: '80px'}}>
                <div className="w-full h-0.5 bg-gradient-to-r from-blue-200 via-blue-400 to-blue-200 relative">
                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-500 to-transparent opacity-60"></div>
                </div>
              </div>
            </div>
            
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6 sm:gap-8">
              {[
                {
                  step: '01',
                  title: '需求沟通',
                  description: '专业顾问1对1深度沟通，了解您的具体需求和预算范围',
                  icon: <MessageCircle className="w-6 h-6 sm:w-8 sm:h-8" />,
                  color: 'from-blue-500 to-blue-600'
                },
                {
                  step: '02',
                  title: '方案设计',
                  description: '2小时内提供专业设计方案，包含详细报价和效果图',
                  icon: <FileText className="w-6 h-6 sm:w-8 sm:h-8" />,
                  color: 'from-indigo-500 to-indigo-600'
                },
                {
                  step: '03',
                  title: '合同签订',
                  description: '确认方案细节，签订正式合同，保障双方合法权益',
                  icon: <Edit className="w-6 h-6 sm:w-8 sm:h-8" />,
                  color: 'from-purple-500 to-purple-600'
                },
                {
                  step: '04',
                  title: '生产制作',
                  description: '工厂标准化生产流程，严格质量控制，实时进度反馈',
                  icon: <Hammer className="w-6 h-6 sm:w-8 sm:h-8" />,
                  color: 'from-pink-500 to-pink-600'
                },
                {
                  step: '05',
                  title: '安装交付',
                  description: '专业安装团队上门服务，48小时内完成安装调试',
                  icon: <Wrench className="w-6 h-6 sm:w-8 sm:h-8" />,
                  color: 'from-red-500 to-red-600'
                }
              ].map((process, index) => (
                <div key={index} className="relative group">
                  {/* 移动端连接线 */}
                  {index < 4 && (
                    <div className="lg:hidden flex justify-center mt-6 sm:mt-8 mb-3 sm:mb-4">
                      <div className="w-8 sm:w-12 h-0.5 bg-gradient-to-r from-blue-300 to-blue-500"></div>
                    </div>
                  )}
                  
                  <div className="text-center relative z-10">
                    {/* 步骤圆圈 */}
                    <div className={`w-16 h-16 sm:w-20 sm:h-20 mx-auto mb-4 sm:mb-6 bg-gradient-to-br ${process.color} rounded-full flex items-center justify-center shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-110 relative border-4 border-white`}>
                      <div className="text-white">
                        {process.icon}
                      </div>
                      <div className="absolute -top-1.5 -right-1.5 sm:-top-2 sm:-right-2 w-6 h-6 sm:w-8 sm:h-8 bg-white rounded-full flex items-center justify-center shadow-md border-2 border-gray-100">
                        <span className="text-xs sm:text-sm font-bold text-gray-700">{process.step}</span>
                      </div>
                    </div>
                    
                    {/* 内容卡片 */}
                    <div className="bg-white rounded-2xl p-4 sm:p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 group-hover:border-blue-200 group-hover:-translate-y-2">
                      <h3 className="text-base sm:text-lg lg:text-xl font-bold text-gray-900 mb-2 sm:mb-3 group-hover:text-blue-600 transition-colors duration-300">
                        {process.title}
                      </h3>
                      <p className="text-gray-600 text-xs sm:text-sm leading-relaxed">
                        {process.description}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          
          {/* CTA区域 - 案例页面风格 */}
          <div className="relative overflow-hidden rounded-2xl mt-8 sm:mt-12">
            <div className="absolute inset-0 bg-gradient-to-r from-blue-600 via-purple-600 to-blue-800"></div>
            <div className="absolute inset-0 bg-black/10"></div>
            <div className="relative p-6 sm:p-8 lg:p-12 text-center text-white">
              <div className="max-w-4xl mx-auto">
                <div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-3 mb-3 sm:mb-4">
                  <Phone className="text-2xl sm:text-3xl text-yellow-400" />
                  <h3 className="text-xl sm:text-2xl lg:text-3xl font-bold">准备开始您的项目了吗？</h3>
                </div>
                <p className="text-base sm:text-lg lg:text-xl mb-6 sm:mb-8 opacity-90 leading-relaxed px-4">
                  立即联系我们，获取专业方案和优惠报价，
                  <br className="hidden sm:block" />让我们一起创造更多精彩的品牌故事
                </p>
                
                {/* 服务亮点 */}
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 mb-6 sm:mb-8">
                  <div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 sm:p-4">
                    <Target className="text-xl sm:text-2xl text-green-400 mb-1 sm:mb-2" />
                    <h4 className="font-semibold mb-1 text-sm sm:text-base">专业团队</h4>
                    <p className="text-xs sm:text-sm opacity-80">12年行业经验</p>
                  </div>
                  <div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 sm:p-4">
                    <Star className="text-xl sm:text-2xl text-yellow-400 mb-1 sm:mb-2" />
                    <h4 className="font-semibold mb-1 text-sm sm:text-base">品质保证</h4>
                    <p className="text-xs sm:text-sm opacity-80">98.5%客户满意度</p>
                  </div>
                  <div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 sm:p-4">
                    <Heart className="text-xl sm:text-2xl text-orange-400 mb-1 sm:mb-2" />
                    <h4 className="font-semibold mb-1 text-sm sm:text-base">贴心服务</h4>
                    <p className="text-xs sm:text-sm opacity-80">全程跟踪支持</p>
                  </div>
                </div>
                
                <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center">
                  <Button
                    type="primary"
                    size="large"
                    icon={<Phone className="w-4 h-4" />}
                    className="bg-blue-600 text-white border-blue-600 hover:bg-blue-700 hover:border-blue-700 font-semibold px-6 sm:px-8 py-3 h-auto shadow-lg text-sm sm:text-base"
                    onClick={() => setContactModalOpen(true)}
                  >
                    免费获取方案
                  </Button>
                  <Button
                    size="large"
                    className="bg-blue-600 text-white border-blue-600 hover:bg-blue-700 hover:border-blue-700 font-semibold px-6 sm:px-8 py-3 h-auto text-sm sm:text-base"
                    href={`tel:${APP_CONFIG.phone}`}
                  >
                    <span className="hidden sm:inline">电话咨询：</span>{APP_CONFIG.phone}
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 客户Logo墙区域 */}
      <section className="py-12 sm:py-16 bg-gray-50 overflow-hidden">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-8 sm:mb-12">
            <div className="inline-flex items-center justify-center bg-blue-600 rounded-lg mb-4 sm:mb-6 w-12 h-12 sm:w-16 sm:h-16">
              <Globe className="text-white w-6 h-6 sm:w-8 sm:h-8" />
            </div>
            <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-3 sm:mb-4">
              合作客户
            </h2>
            <div className="text-base sm:text-lg text-blue-600 font-semibold mb-3 sm:mb-4">
              1000+ 企业选择 • 值得信赖
            </div>
            <p className="text-sm sm:text-base text-gray-600 max-w-2xl mx-auto px-4">
              已为众多知名品牌提供专业广告服务，覆盖各行各业
            </p>
          </div>
          
          {/* 第一行滚动 */}
          <div className="relative mb-6 sm:mb-8">
            <div className="flex animate-scroll-right space-x-4 sm:space-x-6 lg:space-x-8">
              {[
                { name: '客户1', logo: '/images/clients/client-01.jpg' },
                { name: '客户2', logo: '/images/clients/client-02.jpg' },
                { name: '客户3', logo: '/images/clients/client-03.jpg' },
                { name: '客户4', logo: '/images/clients/client-04.jpg' },
                { name: '客户5', logo: '/images/clients/client-05.jpg' },
                { name: '客户6', logo: '/images/clients/client-06.jpg' },
                { name: '客户7', logo: '/images/clients/client-07.jpg' },
                { name: '客户8', logo: '/images/clients/client-08.jpg' },
                { name: '客户9', logo: '/images/clients/client-09.jpg' },
                { name: '客户10', logo: '/images/clients/client-10.jpg' },
                { name: '客户11', logo: '/images/clients/client-11.jpg' },
                { name: '客户12', logo: '/images/clients/client-12.jpg' },
                // 重复一遍以实现无缝滚动
                { name: '客户1', logo: '/images/clients/client-01.jpg' },
                { name: '客户2', logo: '/images/clients/client-02.jpg' },
                { name: '客户3', logo: '/images/clients/client-03.jpg' },
                { name: '客户4', logo: '/images/clients/client-04.jpg' },
                { name: '客户5', logo: '/images/clients/client-05.jpg' },
                { name: '客户6', logo: '/images/clients/client-06.jpg' },
                { name: '客户7', logo: '/images/clients/client-07.jpg' },
                { name: '客户8', logo: '/images/clients/client-08.jpg' },
                { name: '客户9', logo: '/images/clients/client-09.jpg' },
                { name: '客户10', logo: '/images/clients/client-10.jpg' },
                { name: '客户11', logo: '/images/clients/client-11.jpg' },
                { name: '客户12', logo: '/images/clients/client-12.jpg' }
              ].map((client, index) => (
                <div key={index} className="bg-white p-3 sm:p-4 lg:p-6 rounded-lg shadow-md border flex items-center justify-center h-16 w-24 sm:h-20 sm:w-28 lg:h-24 lg:w-32 flex-shrink-0 hover:shadow-lg transition-shadow duration-300">
                  <img 
                    src={client.logo}
                    alt={client.name}
                    className="max-w-full max-h-full object-contain transition-all duration-300 filter-none"
                  />
                </div>
              ))}
            </div>
          </div>
          
          {/* 第二行滚动 */}
          <div className="relative">
            <div className="flex animate-scroll-left space-x-4 sm:space-x-6 lg:space-x-8">
              {[
                { name: '客户13', logo: '/images/clients/client-13.jpg' },
                { name: '客户14', logo: '/images/clients/client-14.jpg' },
                { name: '客户15', logo: '/images/clients/client-15.jpg' },
                { name: '客户16', logo: '/images/clients/client-16.jpg' },
                { name: '客户17', logo: '/images/clients/client-17.jpg' },
                { name: '客户18', logo: '/images/clients/client-18.jpg' },
                { name: '客户19', logo: '/images/clients/client-19.jpg' },
                { name: '客户20', logo: '/images/clients/client-20.jpg' },
                { name: '客户21', logo: '/images/clients/client-21.jpg' },
                { name: '客户22', logo: '/images/clients/client-22.jpg' },
                { name: '客户23', logo: '/images/clients/client-23.jpg' },
                { name: '客户24', logo: '/images/clients/client-24.jpg' },
                // 重复一遍以实现无缝滚动
                { name: '客户13', logo: '/images/clients/client-13.jpg' },
                { name: '客户14', logo: '/images/clients/client-14.jpg' },
                { name: '客户15', logo: '/images/clients/client-15.jpg' },
                { name: '客户16', logo: '/images/clients/client-16.jpg' },
                { name: '客户17', logo: '/images/clients/client-17.jpg' },
                { name: '客户18', logo: '/images/clients/client-18.jpg' },
                { name: '客户19', logo: '/images/clients/client-19.jpg' },
                { name: '客户20', logo: '/images/clients/client-20.jpg' },
                { name: '客户21', logo: '/images/clients/client-21.jpg' },
                { name: '客户22', logo: '/images/clients/client-22.jpg' },
                { name: '客户23', logo: '/images/clients/client-23.jpg' },
                { name: '客户24', logo: '/images/clients/client-24.jpg' }
              ].map((client, index) => (
                <div key={index} className="bg-white p-3 sm:p-4 lg:p-6 rounded-lg shadow-md border flex items-center justify-center h-16 w-24 sm:h-20 sm:w-28 lg:h-24 lg:w-32 flex-shrink-0 hover:shadow-lg transition-shadow duration-300">
                  <img 
                    src={client.logo}
                    alt={client.name}
                    className="max-w-full max-h-full object-contain transition-all duration-300 filter-none"
                  />
                </div>
              ))}
            </div>
          </div>
          
          {/* 客户统计卡片 */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6 mt-8 sm:mt-12">
            <div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-4 sm:p-6 text-center border border-blue-200">
              <div className="text-2xl sm:text-3xl font-bold text-blue-600 mb-1 sm:mb-2">500+</div>
              <div className="text-gray-700 font-medium text-sm sm:text-base">成功案例</div>
            </div>
            <div className="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-4 sm:p-6 text-center border border-green-200">
              <div className="text-2xl sm:text-3xl font-bold text-green-600 mb-1 sm:mb-2">1000+</div>
              <div className="text-gray-700 font-medium text-sm sm:text-base">合作客户</div>
            </div>
            <div className="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-4 sm:p-6 text-center border border-purple-200">
              <div className="text-2xl sm:text-3xl font-bold text-purple-600 mb-1 sm:mb-2">99%</div>
              <div className="text-gray-700 font-medium text-sm sm:text-base">客户满意度</div>
            </div>
            <div className="bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-4 sm:p-6 text-center border border-orange-200">
              <div className="text-2xl sm:text-3xl font-bold text-orange-600 mb-1 sm:mb-2">10+</div>
              <div className="text-gray-700 font-medium text-sm sm:text-base">服务年限</div>
            </div>
          </div>
        </div>
      </section>

      {/* 联系弹窗 */}
      <ContactModal
        open={contactModalOpen}
        onClose={() => setContactModalOpen(false)}
      />
      
      {/* 返回顶部按钮 */}
      <BackToTop />
    </div>
  );
};

export default HomePage;